<style>
.qf-side-rank  {border:1px solid #ddd;}
.qf-side-rank .hd {height:28px;line-height:28px;background-color:#f2f2f2;border-bottom:1px solid #ddd;}
.qf-side-rank .hd h3 {padding:0 8px;font:14px/28px "microsoft yahei";color:#666}
.qf-side-rank .bd {clear:both;padding:0 5px}
/*样式1*/
.rank-style1 .item .goods-pic,.rank-style1 .item .goods-name,.rank-style1 .item .goods-name .goods-price {overflow:hidden}
.rank-style1 .item {position:relative;height:<{$setting.height}>px;padding:8px 0 8px <{$setting.width+20}>px;zoom:1;border-top:1px dotted #DEDEDE}
.rank-style1 .item em,.rank-style1 .item .goods-pic {position:absolute;top:8px}
.rank-style1 .item em {left:-2px;width:18px;height:18px;line-height:18px;background:url("images/rbg.gif") right 0;text-align:center;font-size:10px;color:#ddd;z-index:2}
.rank-style1 .item .goods-pic {left:13px;width:<{$setting.width}>px;height:<{$setting.height}>px;display:table-cell;vertical-align:middle;*display:block;*font-family:Arial;*font-size:<{$setting.height*0.873}>px;*line-height:<{$setting.height}>px;text-align:center;z-index:1}
.rank-style1 .item .goods-pic img {vertical-align:middle;max-width:<{$setting.width}>px;max-height:<{$setting.height}>px;_width:<{$setting.width}>px;_height:<{$setting.height}>px}
.rank-style1 .selected em,.rank-style1 .item em.hl {background-position:left 0;color:#e4393c}
.rank-style1 .fore1 {border-top:none}
.rank-style1 .item .goods-name {word-break:break-all;word-wrap:break-word;line-height:18px;<{if $setting.showbuycount !='on'}>height:36px<{else}>height:18px<{/if}>}
.rank-style1 .item .goods-price {color:#999;text-decoration:none;font-size:12px;font-weight:normal;text-decoration:none}
.rank-style1 .item .goods-price ins {color:#e4393c;font-size:14px;text-decoration:none}
.rank-style1 .item .goods-buycount {color:#999}
.rank-style1 .item .goods-buycount strong {color:#6a77b6;font-weight:normal}
/*样式2*/
.rank-style2 .item .goods-pic,.rank-style2 .item .goods-name,.rank-style2 .item .goods-name .goods-price {overflow:hidden}
.rank-style2 .item {position:relative;padding:8px 0 8px 22px;zoom:1;border-top:1px dotted #DEDEDE;cursor:pointer}
.rank-style2 .item em {position:absolute;top:8px;left:-2px;width:18px;height:18px;line-height:18px;background:url("images/rbg.gif") right 0;text-align:center;font-size:10px;color:#ddd}
.rank-style2 .selected em,.rank-style2 .item em.hl {background-position:left 0;color:#e4393c}
.rank-style2 .item .goods-pic  {display:none}
.rank-style2 .item .goods-pic {width:<{$setting.width}>px;height:<{$setting.height}>px;float:left;vertical-align:middle;*font-family:Arial;*font-size:<{$setting.height*0.873}>px;*line-height:<{$setting.height}>px;text-align:center;margin:0 5px 0 -2px}
.rank-style2 .item .goods-pic img {vertical-align:middle;max-width:<{$setting.width}>px;max-height:<{$setting.height}>px;_width:<{$setting.width}>px;_height:<{$setting.height}>px}
.rank-style2 .fore1 {border-top:none}
.rank-style2 .item .goods-info {display:none}
.rank-style2 .item .goods-name {line-height:18px;height:18px;white-space:nowrap;text-overflow:ellipsis}
.rank-style2 .item .goods-price {color:#999;text-decoration:none;font-size:12px;font-weight:normal;text-decoration:none}
.rank-style2 .item .goods-price ins {color:#e4393c;font-size:14px;text-decoration:none}
.rank-style2 .item .goods-buycount {color:#999}
.rank-style2 .item .goods-buycount strong {color:#6a77b6;font-weight:normal}
.rank-style2 .selected  {height:<{$setting.height}>px;}
.rank-style2 .selected .goods-name {word-break:break-all;word-wrap:break-word;white-space:normal;<{if $setting.showbuycount !='on'}>height:36px<{else}>height:18px<{/if}>}
.rank-style2 .selected .goods-pic {display:table-cell;*display:block}
.rank-style2 .selected .goods-info {display:block}
</style>
<div class="qf-side-rank rank-<{$setting.style|default:'style1'}>">
 <{if $setting.title}><div class="hd"><h3><{$setting.title}></h3></div><{/if}>
 <div class="bd clearfix">
  <ul class="ranklist" id="Ranks_<{$widgets_id}>">
    <{assign var="do" value='1'}>
	<{if count($data.goodsRows) >0}>
    <{foreach from=$data.goodsRows item=row key=gid name=ranking}>
    <li class="item fore<{$do}><{if $do ==1}> selected<{/if}>">
		 <{assign var=pickey value=$setting.gpic_size|default:'goodsPicS'}>
		<em<{if $do <= $setting.showing}> class="hl"<{/if}>><{$do}></em>
		<div class="goods-pic"><a target="_blank" href="<{$row.goodsLink}>"><img src="<{$data.theme_dir}>/images/i/transparent.gif}>" data-src="<{$row[$pickey]}>" alt="<{$row.goodsName}>"<{if $setting.resize == 'on'}> width="<{$setting.width}>" height="<{$setting.height}>"<{else}> data-img-zoom="true"<{/if}> /></a></div>
		<div class="goods-name"><a title="<{$row.goodsName}>" target="_blank" href="<{$row.goodsLink}>"><{$row.goodsName|cut:$setting.maxlength}></a></div>
		  <div class="goods-info">			  
			  <{if $setting.showgoodsSalePrice !='off' || $setting.showgoodsMarketPrice == 'on'}>
			  <div class="goods-price">
				<{if $setting.showgoodsSalePrice !='off'}><ins class="price"><{$setting.salePricetxt}><{$row.goodsSalePrice|cur}></ins><{/if}>
				<{if $setting.showgoodsMarketPrice == 'on'}><del><{$setting.MarketPricetxt}><{$row.goodsMarketPrice|cur}></del><{/if}>
			  </div>
			  <{/if}>
			  <{if $setting.showbuycount =='on'}>
			  <div class="goods-buycount"><span><{$setting.btitle}></span><strong><{if $setting.buycount==1}><{$row.goodsBuyCount|default:'0'}><{else}><{$row.goodsBuyCountWeek|default:'0'}><{/if}></strong></div>
			  <{/if}>
		 </div>      
     </li>
	 <{assign var="do" value=$do+1}>
    <{/foreach}>
	<{/if}>
  </ul>
  </div>
</div>
<script>
window.addEvent('domready',function(){
	var topSales = $('Ranks_<{$widgets_id}>').getElements('.item');
	topSales && topSales.addEvent('mouseenter',function(){
		this.addClass('selected').getSiblings().removeClass('selected');
	})
})
</script>